<template>
	<view>
		<u-popup :show="showWxLogin" mode="bottom" round="44rpx" :closeable="true" @close="onClose">
			<view class="popupBox">
				<view class="h2 bold">获取您的昵称、头像</view>
				<view class="h3">主要用于向用户提供具有辨识度的用户中心界面</view>
				<!-- #ifdef MP-WEIXIN -->
                <u--form
                        labelPosition="left"
                        :model="form"
                        ref="uForm"
                        labelWidth="55"
                        :labelStyle="{
                            height: '94rpx'
                        }"
                >
                    <u-form-item
                            label="头像"
                            prop="avatarUrl"
                            borderBottom
                    >
                        <button class="avatar-wrapper wlkflex justify-between" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                            <image class="avatar" lazy-load :src="form.avatarUrl"></image>
                            <u-icon name="arrow-right" size="32rpx" color="#999"></u-icon>
                        </button>
                    </u-form-item>
                    <u-form-item
                            label="昵称"
                            prop="nickName"
                            borderBottom
                    >
                        <u-input
                                v-model="form.nickName"
                                placeholder="请输入昵称"
                                border="none"
                                type="nickname"
                                clearable
                                @blur="onBlur"
                        ></u-input>
                    </u-form-item>
                </u--form>
				<view class="submit" :style="{background:themeColor}" @click="submit">确定</view>
				<!-- #endif -->
			</view>
		</u-popup>
	</view>
</template>

<script>
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
	computed: {
		...mapGetters(['showWxLogin','themeColor','userInfo','initUser']),
	},
    data() {
        return {
            form:{
                avatarUrl:'',
                nickName:'',
                fileUrl:''
            },
            event:'login'
		}
	},
    watch:{
        showWxLogin(val) {
            if(val){
                if(uni.$u.page()=='/pages/user/info'){//代表绑定第三方
                    this.event = 'bind';
                }else{
                    this.init()
                }
            }
        },
        userInfo(val){
            if(val.id && val.id>0){
                this.form.avatarUrl = val.avatar;
                this.form.nickName = val.nickname;
                this.form.fileUrl = val.avatar;
            }else{
              this.form.avatarUrl = '';
              this.form.nickName = '';
              this.form.fileUrl = '';
            }
        }
    },
	methods:{
        ...mapActions(["getUserInfo"]),
		...mapMutations(['setShowWxLogin']),
		onClose(){
			this.setShowWxLogin(false);
		},
        onBlur(e){
            this.form.nickName = e
        },
		onChooseAvatar(e){
            let that = this;
            uni.$u.http.upload('common/upload', {
                filePath: e.detail.avatarUrl, // 要上传文件资源的路径。
                name: 'file', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
                // #ifdef H5 || APP-PLUS
                timeout: 60000, // H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)
                // #endif
            }).then(res => {
                // 返回的res.data 已经进行JSON.parse
                that.form.avatarUrl = res.data.url;
                that.form.fileUrl = res.data.fileUrl;
            }).catch(err => {
                that.$u.toast('图片格式不正确');
            })
		},
        init(){
            let that = this;
            uni.login({
                success(res) {
                    uni.$u.http.post('user/mpLogin', {wxCode: res.code},{custom: {hideMsg: true}}).then(res => {
                       that.getUserInfo(res.data.token);
                        that.$u.toast(res.msg);
                        that.onClose();
                    }).catch((error) => {
                    })
                },
                fail(res) {
                    console.log(res)
                }

            });
        },
		// 微信小程序
		submit(){
			var that = this
			setTimeout(()=>{
                if (uni.$u.test.isEmpty(this.form.avatarUrl)) {
					uni.showToast({
						title: '请上传头像~',
						icon: 'none'
					});
					return
				}
                if (uni.$u.test.isEmpty(this.form.nickName)) {
					uni.showToast({
						title: '请输入昵称~',
						icon: 'none'
					});
					return
				}
				uni.login({
				    success(res){
						let httpData = {
							wxCode:res.code,
							avatarUrl:that.form.fileUrl,
							nickName:that.form.nickName,
                            event:that.event,
						};
                        uni.$u.http.post('wechat/mpAuthLogin',httpData).then(res => {
                            that.getUserInfo(res.data.token);
                            that.$u.toast(res.msg);
                            that.onClose();
                        }).catch(res => {
                            console.log(res)
                        })
					}
				})
			},100)
		},
	},
}
</script>

<style lang="scss" scoped>
.popupBox{
	width: 100%;
	padding: 50rpx 40rpx 30rpx;
	.logo {
	    width: 90rpx;
	    height: 90rpx;
	    border-radius: 18rpx;
	    overflow: hidden;
	    .img {
	        width: 90rpx;
	        height: 90rpx;
	    }
	}
	.h2{
		color: #333;
		font-size: 32rpx;
	}
	.h3{
		font-size: 26rpx;
		color: #999;
		line-height: 1.4;
		padding-top: 14rpx;
	}
	.bold{
		font-weight: bold;
	}
    .avatar-wrapper{
        width: 100%;
        .avatar{
            width: 70rpx;
            height: 70rpx;
            border-radius: 50%;
        }
    }
}
.submit{
	margin-top: 30rpx;
	width: 100%;
	height: 92rpx;
	border-radius: 10rpx;
	text-align: center;
	line-height: 92rpx;
	color: #fff;
	font-size: 32rpx;
	background: #E83F3C;
	border: none;
}
</style>